<template>
  <edit-dialog tilte="新增每日施工申请" :centerDialogVisible="visible" width="1200" @Cancel="cancelSelect" @Submit="handleToAdd">
    <template #content>
      <div>
        <el-form ref="formRef" :model="searchForm" inline label-width="auto">
          <el-form-item label="项目类型" prop="projectType" style="width: 21%">
            <el-select v-model="searchForm.projectType" placeholder="请选择" @change="projectTypeChange">
              <el-option
                v-for="item in projectTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键词" prop="keywords" style="width: 21%">
            <el-input v-model="searchForm.keywords" placeholder="支持模糊搜索"/>
          </el-form-item>
          <el-form-item style="width: 150px;">
            <el-button @click="handleReset">清空</el-button>
            <el-button :disabled="searchDisabled||loading" type="primary" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div>
        <div v-show="searchForm.projectType==='4'" style="height: 500px;">
          不关联施工项目
        </div>
        <el-table :height="500" v-show="searchForm.projectType!=='4'" :data="tableData" class="project-application-table"
         v-loading="loading" @current-change="handleCurrentChange" highlight-current-row>
          <el-table-column label="序号" prop="index" width="60">
            <template v-slot="{$index}">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column width="120" show-overflow-tooltip label="项目类型" prop="projectType" :formatter="(row, column, cellValue) => dicFormatter(projectTypeOption, cellValue)"/>
          <el-table-column width="180" show-overflow-tooltip label="项目编号" prop="projectNo"/>
          <el-table-column width="180" show-overflow-tooltip label="项目名称" prop="projectName"/>
          <el-table-column width="180" show-overflow-tooltip label="项目单位" prop="projectUnitName"/>
          <el-table-column width="120" show-overflow-tooltip label="项目负责人" prop="constructionChargePersonName"/>
          <el-table-column width="180" show-overflow-tooltip label="施工单位" prop="constructionUnitName"/>
          <el-table-column width="200" show-overflow-tooltip label="开工日期" prop="planStartTime"/>
          <el-table-column width="200" show-overflow-tooltip label="涉及作业" prop="specialJobType"/>
        </el-table>
      </div>
    </template>
  </edit-dialog>
</template>

<script>
import EditDialog from "../../../event/components/modal.vue";
import { getProjectPageList} from "@/api/construction-daily/daily";
import { dicFormatter } from "@/views/construction/project-daily/projectUtil";
import { ElMessage } from 'element-plus';
import router from '@/router'

export default {
  name: "SelectProject",
  components: { EditDialog },
  props: {
    projectWorkTypeOptions: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      visible:false,
      projectTypeOption:[
        {
          label: '已立项项目',
          value: '1',
        },
        {
          label: '临时施工',
          value: '2',
        },
        {
          label: '维修施工',
          value: '3',
        },
          {
          label: '应急抢修',
          value: '4',
        },
      ],
      searchForm: {},
      loading: false,
      tableData:[],
      currentProjectId: null,
      dicFormatter,
      // projectType: undefined,
      searchDisabled: false,
    }
  },
  computed: {},
  methods: {
    projectTypeChange(val){
    //  this.projectType=val;
     if(val==='4'){
      this.searchDisabled=true;
     }else{
      this.searchDisabled=false;
      this.getList()
     }
    },
    findSpecialJobTypeName(typeList){
      const aa = typeList.map(item=>dicFormatter(this.projectWorkTypeOptions, item))
      return aa.join(',')
    },
    openSelectProject(){
      this.searchForm={};
      this.getList();
      this.visible=true;
    },
    handleCurrentChange(val) {
      this.currentProjectId = val.id;
    },

    handleReset() {
      this.$refs.formRef.resetFields();
      this.getList();
    },
    handleQuery() {
      this.getList()
    },
   
    getList() {
      this.loading = true
      getProjectPageList(this.searchForm)
      .then(res => {
        let {data} = res

        data.forEach(item => {
          item.specialJobType = item.specialJobType?.length>0?this.findSpecialJobTypeName(item.specialJobType):'-' 
        })
        this.tableData = data
      })
      .catch((err)=>{
        this.$message.error(err);
      })
      .finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 300)
      })
    },
    // 跳转新增页面
    handleToAdd(){
      if(this.searchForm.projectType==='4'){
       router.push(`/construction/project-daily/apply`)
      }else{
        if(this.currentProjectId){
          // store.dispatch('construction/setSelected', currentRow.value)??????
          router.push(`/construction/project-daily/apply?projectId=${this.currentProjectId}`)
        }else{
         this.$message({
          message: '请点击表格行选择项目',
          type: 'warning'
        });
        }
      }
    },
    cancelSelect(){
      this.visible=false;
      this.tableData = [];
      this.currentProjectId=null;
    }
  },
  // created(){
  //   this.getList();
  // }
}
</script>

<style lang="less" scoped>
.user-table {
  padding-left: 50px;
  margin-bottom: 20px;

  .user-table-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .table-title {
      font-size: 14px;
    }
  }
}
</style>
